// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.score-stats {
  @_top: score-stats;

  .default-gutter-v2();
  padding-top: 20px;
  padding-bottom: $padding-top;
  display: flex;
  flex-direction: column;

  @media @desktop {
    flex-direction: row;
    margin: -5px;
  }

  &__group {
    margin: 5px;
    display: grid;
    grid-gap: 10px;

    &--stats {
      @media @desktop {
        margin-left: auto;
      }
    }

    &--user-card {
      @media @desktop {
        width: 360px;
      }
    }
  }

  &__group-row {
    .@{_top}__group--stats & {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      grid-gap: 2px;
    }
  }

  &__stat {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  &__stat-row {
    padding: 0 10px;
    font-size: @font-size--large;
    line-height: normal;

    &--label {
      font-size: @font-size--normal;
      background-color: @osu-colour-b6;
      border-radius: 10000px;
      text-transform: uppercase;
      white-space: nowrap;
    }

    &--perfect {
      color: hsl(@beatmap-score--hsl-perfect);
    }

    &--maximum {
      font-size: @font-size--normal;
    }
  }
}
